<script setup lang="ts">
import { useStorage } from "@vueuse/core";
import { computed, ref } from "vue";
import { base64ToText, textToBase64 } from "@/util/base64.ts";
import { withDefaultOnError } from "@/framework/util/defaults.ts";
import ToolView from "@/modules/tools/layout/tool-view.vue";

const encodeUrlSafe = useStorage("base64-string-converter.encode-url-safe", false);
const decodeUrlSafe = useStorage("base64-string-converter.decode-url-safe", false);

const textInput = ref("");
const base64Output = computed(() => textToBase64(textInput.value, { makeUrlSafe: encodeUrlSafe.value }));

const base64Input = ref("");
const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim(), { makeUrlSafe: decodeUrlSafe.value }), ""));
</script>

<template>
  <tool-view title="Base64 字符串编码/解码" description="将字符串编码和解码为其 Base64 格式表示形式">
    <div class="pv-20 full-view flex-center">
      <a-form class="w-80p" :label-col="{ span: 5 }">
        <a-divider orientation="left">
          <span class="color-text-secondary font-14">编码</span>
        </a-divider>
        <a-form-item label="编码内容">
          <a-textarea v-model:value="textInput" :auto-size="{ minRows: 5, maxRows: 5 }" allow-clear />
        </a-form-item>
        <a-form-item label=" " :colon="false">
          <a-checkbox v-model:checked="encodeUrlSafe">对URL安全进行编码</a-checkbox>
        </a-form-item>
        <a-form-item label="编码结果">
          <a-textarea v-model:value="base64Output" readonly :auto-size="{ minRows: 5, maxRows: 5 }" />
        </a-form-item>
        <a-divider orientation="left">
          <span class="color-text-secondary font-14">解码</span>
        </a-divider>
        <a-form-item label="解码内容">
          <a-textarea v-model:value="base64Input" :auto-size="{ minRows: 5, maxRows: 5 }" allow-clear />
        </a-form-item>
        <a-form-item label=" " :colon="false">
          <a-checkbox v-model:checked="decodeUrlSafe">对URL安全进行解码</a-checkbox>
        </a-form-item>
        <a-form-item label="解码结果">
          <a-textarea v-model:value="textOutput" readonly :auto-size="{ minRows: 5, maxRows: 5 }" />
        </a-form-item>
      </a-form>
    </div>
  </tool-view>
</template>

<style scoped lang="less"></style>
